<template>
  <div>
    <div v-show="!showAddContent">
      <Button type="primary" style="margin-left:10px;margin-bottom:10px" @click="addBtn">添加</Button>
      <Button
        type="warning"
        style="margin-left:10px;margin-bottom:10px"
        :disabled="twobtn"
        @click="updataBtn"
      >修改</Button>
      <Button
        type="error"
        style="margin-left:10px;margin-bottom:10px"
        :disabled="threebtn"
        @click="delBtn"
      >删除</Button>
      <!-- <Button style="margin-left:10px;margin-bottom:10px" @click="handleSelectAll(false)">取消选择</Button> -->
      <Table
        border
        ref="selection"
        :columns="modalColumns"
        :data="ZZList"
        @on-select="firstListSelect"
        @on-select-cancel="firstListSelect"
        @on-row-click="firstListClick"
      ></Table>
      <Page :total="rows" :page-size="10" @on-change="NextPage" />
      <Modal v-model="showAddziji" width="60%" :mask-closable="true" @on-cancel="cancelzj">
        <div class="HeightAlldiv">
          <Row :gutter="10" class="row">
            <Card>
              <p style="margin:10px 0">
                标题：
                <Input v-model="selectTitlezj" placeholder="请输入标题" style="width: 300px" />
              </p>
              <!-- <p style="margin:10px 0">
                副标题：
                <Input v-model="selectSubtitle" placeholder="请输入副标题" style="width: 300px" />
              </p>-->
              封面图：
              <div class="demo-upload-list" v-show="showAddImgzj">
                <template>
                  <img :src="selectImgzj" />
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click="handleView(1)"></Icon>
                    <Icon type="ios-trash-outline" @click="handleRemove(1)"></Icon>
                  </div>
                </template>
              </div>
              <Upload
                v-show="!showAddImgzj"
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//manager.shizilaoba.com/lion/file/addImage"
                style="display: inline-block;width:200px;"
              >
                <div style="width: 200px;height:200px;line-height: 200px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>音频
              <Upload action="//manager.shizilaoba.com/lion/file/addMp3" :on-success="mp3UploadOk">
                <Button icon="ios-cloud-upload-outline">上传音频</Button>
              </Upload>
              <Modal title="查看图片">
                <img
                  src="http://qn.shizilaoba.com/2020/06/27/6126c367-30b2-4788-8e79-1b38cb473c2a.png"
                  style="width: 100%"
                />
              </Modal>
            </Card>
          </Row>
        </div>
        <div slot="footer">
          <Button @click="cancelzj">取消</Button>
          <Button type="primary" @click="okaddzj">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modal2" width="360" :mask-closable="true" @on-cancel="cancel">
        <p slot="header" style="color:#000;text-align:center">
          <span></span>
        </p>
        <p style="margin-bottom:10px">真的要删除吗？</p>

        <div slot="footer">
          <Button @click="cancel">取消</Button>
          <Button type="primary" @click="ok">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modal2zj" width="360" :mask-closable="true" @on-cancel="Mcancelzj">
        <p slot="header" style="color:#000;text-align:center">
          <span></span>
        </p>
        <p style="margin-bottom:10px">真的要删除吗子集？</p>

        <div slot="footer">
          <Button @click="Mcancelzj">取消</Button>
          <Button type="primary" @click="Mokzj">确定</Button>
        </div>
      </Modal>
    </div>
    <div v-show="showAddContent">
      <p style="margin:10px 0"></p>
      <div class="HeightAlldiv">
        <Row :gutter="10" class="row">
          <Card>
            <p style="margin:10px 0">
              标题：
              <Input v-model="selectTitle" placeholder="请输入标题" style="width: 300px" />
            </p>
            <p style="margin:10px 0">
              副标题：
              <Input v-model="selectSubtitle" placeholder="请输入副标题" style="width: 300px" />
            </p>封面图：
            <div class="demo-upload-list" v-show="showAddImg">
              <template>
                <img :src="selectImg" />
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click="handleView(1)"></Icon>
                  <Icon type="ios-trash-outline" @click="handleRemove(1)"></Icon>
                </div>
              </template>
            </div>
            <Upload
              v-show="!showAddImg"
              ref="upload"
              :show-upload-list="false"
              :default-file-list="defaultList"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="//manager.shizilaoba.com/lion/file/addImage"
              style="display: inline-block;width:200px;"
            >
              <div style="width: 200px;height:200px;line-height: 200px;">
                <Icon type="ios-camera" size="20"></Icon>
              </div>
            </Upload>
            <Modal title="查看图片">
              <img
                src="http://qn.shizilaoba.com/2020/06/27/6126c367-30b2-4788-8e79-1b38cb473c2a.png"
                style="width: 100%"
              />
            </Modal>
            <div class="HeightAlldiv-div" id="HeightAlldiv-div" style="margin-top:10px">
              <!-- 创建文本编辑器 -->
              <div id="editor-div" :style="{width: 100 + '%',height: ckEditorContHeight + 'px'}"></div>

              <input
                type="file"
                id="checkImg"
                style="display: none"
                accept="image/*"
                @change="addFile"
              />
            </div>
            <div class="Button-footer">
              <Button class="Button" @click="cancelBtn">取消</Button>
              <Button class="Button" type="primary" @click="saveFun">保存</Button>
            </div>
          </Card>
        </Row>
      </div>
    </div>
    <Drawer title="" v-model="showZijicouti" width="90%" :mask-closable="true">
      <!-- <p>子集：</p> -->
      <Button type="primary" style="margin-left:10px;margin-bottom:10px" @click="addBtnzj">添加子集</Button>
      <Button
        type="warning"
        style="margin-left:10px;margin-bottom:10px"
        :disabled="twobtnzj"
        @click="updataBtnzj"
      >修改子集</Button>
      <Button
        type="error"
        style="margin-left:10px;margin-bottom:10px"
        :disabled="threebtnzj"
        @click="delBtnzj"
      >删除子集</Button>
      <!-- <Button style="margin-left:10px;margin-bottom:10px" @click="showZijicouti = false">取消</Button> -->

      <Table
        border
        ref="selection"
        :columns="modalColumns"
        :data="zijiZZList"
        @on-select="TwoListSelect"
        @on-select-cancel="TwoListSelect"
        @on-row-click="TwoListClick"
      ></Table>
      <Page :total="zijirows" :page-size="10" @on-change="NextPageZZ" />
      <!-- <p style="margin:10px 0">标题：{{selectTitle}}</p>
      <p style="margin:10px 0">副标题：{{selectSubtitle}}</p>封面图：
      <div class="demo-upload-list">
        <img :src="selectImg" />
      </div>
      <div v-html="selectContent"></div> -->
    </Drawer>
  </div>
</template>

<script>
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
export default {
  data() {
    return {
      //zhuanjiguanli.vue
      ZZList: [], //专辑列表
      PageIndex: 1, //当前页数
      rows: 1, //总条数
      selectId: -1, //选择条目的id
      selectIds: [],
      selectTitle: "", //选择条目的标题
      selectSubtitle: "", //选择条目的副标题
      selectContent: "", //选择条目的富文本
      selectImg: "", //选择条目的封面图
      showAddImg: false, //显示缩略图还是添加图标
      showAddContent: false, //显示隐藏添加修改专辑
      showZijicouti: false, //显示隐藏子集抽屉
      fileimgId: -1,
      zijiZZList: [], //子集list
      zijirows: 1, //子集总数
      PageIndexZZ: 1, //子集页数
      showAddziji: false,
      selectTitlezj: "", //子集标题
      showAddImgzj: false, //是否显示子集添加图片
      selectImgzj: "", //子集图片地址
      selectImgzjFileid: -1, //子集图片文件id
      selectzjId: -1, //子集id
      selectzjIds: [],
      twobtnzj: true,
      threebtnzj: true,
      modal2zj: false, //删除子集弹框
      mp3fileId: -1, //
      //
      defaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar"
        }
      ],
      currentChoose: "",
      modalColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        // {
        //   title: "选择",
        //   key: "id",
        //   width: 70,
        //   align: "center",
        //   render: (h, params) => {
        //     let id = params.row.id;
        //     let flag = false;
        //     if (this.selectId === id) {
        //       flag = true;
        //     } else {
        //       flag = false;
        //     }
        //     let self = this;
        //     return h("div", [
        //       h("Radio", {
        //         props: {
        //           value: flag
        //         },
        //         on: {
        //           "on-change": () => {
        //             self.selectId = id;
        //             self.selectTitle = params.row.title;
        //             self.selectSubtitle = params.row.subtitle;
        //             self.selectContent = params.row.content;
        //             self.selectImg = params.row.cover[0].url;
        //             self.showAddImg = true;
        //             self.setEditorOption();
        //             if (self.selectId != -1) {
        //               self.twobtn = false;
        //             }
        //           }
        //         }
        //       })
        //     ]);
        //   }
        // },
        { title: "标题", key: "title" },
        { title: "创建时间", key: "create_time" }
      ],

      modal1: false,
      modal2: false,
      twobtn: true,
      threebtn: true,
      btnflag: 0, //0无1添加2修改3删除
      data1: [],
      //lzl富文本
      ckEditorContHeight: 350,
      editorOption: null,
      saveLoading: false,
      code: "",
      dataObj: {},
      content: ""
    };
  },
  computed: {},
  beforeMount: function() {
    var _this = this;
  },
  beforeDestroy: function() {
    var _this = this;
  },
  created: function() {
    var _this = this;
    _this.getList();
  },
  mounted: function() {
    var _this = this;
    _this.init();
    _this.checkLeave();
  },
  methods: {
    //上传音频成功
    mp3UploadOk(data) {
      console.log(data);
      var _this = this;
      _this.mp3fileId = data.data.id;
      console.log(_this.mp3fileId);
    },
    //显示删除子集
    delBtnzj() {
      var _this = this;
      _this.modal2zj = true;
    },
    //取消删除子集
    Mcancelzj() {
      var _this = this;
      _this.modal2zj = false;
    },
    //删除子集
    Mokzj() {
      var _this = this;
      var myids = _this.selectzjIds;
      console.log(myids);
      //myids.push(_this.selectId);
      let params = {
        url: "/article/del",
        type: Util.method.post,
        data: {
          ids: myids
        },
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          Utils.showToast.success(_this, "删除成功!");
          _this.twobtnzj = true;
          _this.threebtnzj = true;
          _this.modal2zj = false;
          _this.PageIndexZZ = 1;
          _this.findZj();
        } else {
        }
      }
    },
    //取消添加子集
    cancelzj() {
      var _this = this;
      _this.showAddziji=false;
      _this.selectTitlezj="";
      //初始参数
    },
    //确定添加子集
    okaddzj() {
      var _this = this;
      var dataObj = _this.dataObj;
      dataObj.pid = _this.selectId;
      dataObj.title = _this.selectTitlezj;
      //dataObj.subtitle = _this.selectSubtitle;
      dataObj.images = [];
      dataObj.audio = [];
      dataObj.audio.push(_this.mp3fileId);
      dataObj.images.push(_this.selectImgzjFileid);
      dataObj.content = _this.selectContent; // 富文本
      console.log(dataObj);
      console.log(_this.selectId);
      var myurlp = "";
      if (_this.selectzjId == -1) {
        myurlp = "/article/add";
      } else {
        myurlp = "/article/update";
        dataObj.id = _this.selectzjId;
      }
      let params = {
        url: myurlp,
        type: Util.method.post,
        data: dataObj,
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          Utils.showToast.success(_this, "保存成功!");
          _this.showAddziji = false;
          _this.PageIndexZZ = 1;
          _this.twobtnzj = true;
          _this.threebtnzj = true;
          _this.findZj();
        } else {
          Utils.showToast.error(_this, "保存失败!");
        }
      }
    },
    //添加子集
    addBtnzj() {
      var _this = this;
      //_this.init();
      _this.showAddziji = true;
    },
    //修改专辑
    updataBtnzj() {
      var _this = this;
      _this.findZj();
      _this.showAddImgzj = true;
      _this.showAddziji = true;
    },
    //第一层列表点击
    firstListClick(data) {
      var _this = this;
      console.log(data);
      _this.selectId = data.id;
      _this.selectTitle = data.title;
      _this.selectSubtitle = data.subtitle;
      _this.selectContent = data.content;
      _this.selectImg = data.cover[0].url;
      //显示内容
      _this.showZijicouti = true;
      //查询子集
      _this.findZj();
    },
    //第儿层列表点击
    TwoListClick(data) {
      var _this = this;
      console.log(data);
    },
    //第一层列表选择
    firstListSelect(data) {
      console.log(data.length);
      var _this = this;
      _this.selectIds = [];
      _this.threebtn = false;
      if (data.length == 0) {
        _this.threebtn = true;
      }
      if (data.length == 1) {
        _this.twobtn = false;
        _this.selectId = data[0].id;
        _this.selectTitle = data[0].title;
        _this.selectSubtitle = data[0].subtitle;
        _this.selectContent = data[0].content;
        _this.fileimgId = data[0].cover[0].url;
        _this.selectImg = data[0].cover[0].url;
        _this.showAddImg = true;
        _this.setEditorOption();
      } else {
        _this.twobtn = true;
      }
      for (let k of data) {
        _this.selectIds.push(k.id);
      }
    },
    //第二层列表选择
    TwoListSelect(data) {
      console.log(data);
      var _this = this;
      _this.selectzjIds = [];
      _this.threebtnzj = false;
      if (data.length == 0) {
        _this.threebtnzj = true;
      }
      if (data.length == 1) {
        _this.twobtnzj = false;
        _this.selectzjId = data[0].id;
        _this.selectTitlezj = data[0].title;
        //_this.selectSubtitle = data[0].subtitle;
        _this.selectContentzj = data[0].content;
        _this.selectImgzjFileid = data[0].cover[0].id;
        _this.selectImgzj = data[0].cover[0].url;
        _this.showAddImgzj = true;
        _this.setEditorOption();
      } else {
        _this.twobtnzj = true;
      }
      for (let k of data) {
        _this.selectzjIds.push(k.id);
      }
    },
    //富文本相关
    checkLeave: function() {
      var _this = this;
      window.onbeforeunload = function(e) {
        var e = window.event || e;
        e.returnValue = "确定离开当前页面吗？";
      };
    },
    saveFun: function() {
      var _this = this;
      var content = _this.editorOption
        ? _this.editorOption.container.firstChild.innerHTML
        : "";
      if (content) {
        _this.selectContent =
          content == "<p>&nbsp;</p>" || content == "<p><br></p>" ? "" : content;
      }
      if (_this.selectContent == "") {
        Utils.showToast.error(_this, "请输入内容!");
        return false;
      }
      var dataObj = _this.dataObj;
      dataObj.title = _this.selectTitle;
      dataObj.subtitle = _this.selectSubtitle;
      dataObj.images = [];
      dataObj.images.push(_this.fileimgId);
      dataObj.content = _this.selectContent; // 富文本
      var myurlp = "";
      if (_this.selectId == -1) {
        myurlp = "/article/add";
      } else {
        myurlp = "/article/update";
        dataObj.id = _this.selectId;
      }
      let params = {
        url: myurlp,
        type: Util.method.post,
        data: dataObj,
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          Utils.showToast.success(_this, "保存成功!");
          _this.showAddContent = false;
          _this.twobtn = true;
          _this.threebtn = true;
          _this.getList();
        } else {
          Utils.showToast.error(_this, "保存失败!");
        }
      }
    },
    // 设置富文本内容
    setEditorOption: function() {
      var _this = this;
      if (_this.editorOption) {
        _this.editorOption.container.firstChild.innerHTML = _this.selectContent;
      } else {
        _this.init();
      }
    },
    // 初始化富文本
    init: function() {
      var _this = this;
      this.$nextTick(() => {
        var ckEditorContHeight =
          parseInt($("#HeightAlldiv-div").height()) - 44 - 80;
        _this.ckEditorContHeight = ckEditorContHeight;

        //          var BackgroundClass = Quill.import('attributors/class/background');
        //          var ColorClass = Quill.import('attributors/class/color');
        //          var SizeStyle = Quill.import('attributors/style/size');
        //          Quill.register(BackgroundClass, true);
        //          Quill.register(ColorClass, true);
        //          Quill.register(SizeStyle, true);

        var toolbarOptions = [
          ["bold", "italic", "underline", "strike"], // toggled buttons
          ["blockquote", "code-block"],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],
          [{ header: 1 }, { header: 2 }], // custom button values
          [{ list: "ordered" }, { list: "bullet" }],
          //          [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
          //          [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
          //          [{'direction': 'rtl'}],                         // text direction
          //          [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
          //          [{'color': []}, {'background': []}],          // dropdown with defaults from theme
          //          [{'font': []}],
          [{ align: [] }],
          ["image", "clean"] // remove formatting button
        ];

        _this.editorOption = new Quill("#editor-div", {
          modules: {
            toolbar: toolbarOptions
          },
          placeholder: "编辑内容...",
          theme: "snow" // bubble snow
        });

        if (_this.content) {
          _this.editorOption.container.firstChild.innerHTML = _this.content;
        }

        let toolbar = _this.editorOption.getModule("toolbar");
        toolbar.addHandler("image", () => {
          document.getElementById("checkImg").click();
        });

        $("#editor-div .ql-editor").css(
          "minHeight",
          ckEditorContHeight - 10 + "px"
        );
      });
    },
    // 上传图片
    addFile: function() {
      let _this = this;
      let inputObj = document.getElementById("checkImg");
      let fileObj = inputObj.files[0];
      if (typeof fileObj == "undefined" || fileObj.size <= 0) {
        Utils.showToast.error(_this, "请选择图片!");
        return false;
      }
      let fileName = fileObj.name;
      let fileTypeStr = fileObj.type;
      let fileTypeArr = fileTypeStr.split("/");
      let fileType = fileTypeArr[0].trim();
      let to_url = "";
      if (fileType == "image") {
        to_url = "/file/addImage";
      } else {
        to_url = "/file/addFile";
      }
      let formFile = new FormData();
      formFile.append("file", fileObj); //加入文件对象
      let params = {
        url: to_url,
        type: Util.method.post,
        data: formFile,
        success: _successFileUpload
      };
      Util.ajax(_this, params);

      function _successFileUpload(res) {
        let resData = res.data ? res.data : null;
        if (resData != undefined && resData != null && resData != "") {
          var urlp = resData.url;
          const range = _this.editorOption.getSelection();
          if (range) {
            _this.editorOption.insertEmbed(range.index, "image", urlp);
          }
        }
      }
    },

    //查询子集
    findZj() {
      var _this = this;
      let params = {
        url: "/article/list",
        type: Util.method.post,
        data: {
          page: _this.PageIndexZZ,
          size: 10,
          filter: [{ pid: _this.selectId }]
        },
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          console.log(res);
          _this.zijiZZList = [];
          _this.zijiZZList = res.data;
          _this.zijirows = res.rows;
        } else {
        }
      }
    },
    //lzl
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
      if (status == false) {
        var _this = this;
        _this.twobtn = false;
      }
    },
    handleView(name) {
      console.log("点击的眼睛");
    },
    handleRemove(file) {
      console.log("删除");
      var _this = this;
      if (_this.showZijicouti == true) {
        _this.showAddImgzj = false;
      } else {
        _this.showAddImg = false;
      }

      // 从 upload 实例删除数据
    },
    handleSuccess(res, file) {
      // 因为上传过程为实例，这里模拟添加 url+
      console.log(res);
      var _this = this;
      if (_this.showZijicouti == true) {
        _this.showAddImgzj = true;
        _this.selectImgzjFileid = res.data.id;
        _this.selectImgzj = res.data.url;
      } else {
        _this.showAddImg = true;
        _this.fileimgId = res.data.id;
        _this.selectImg = res.data.url;
      }
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc:
          "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "超出文件大小限制",
        desc: "文件 " + file.name + " 太大，不能超过 2M。"
      });
    },
    handleBeforeUpload() {
      const check = 1;
      if (!check) {
        this.$Notice.warning({
          title: "最多只能上传 5 张图片。"
        });
      }
      return check;
    },
    //获取列表
    NextPage(index) {
      var _this = this;
      _this.PageIndex = index;
      _this.getList();
    },
    //获取列表子集
    NextPageZZ(index) {
      var _this = this;
      _this.PageIndexZZ = index;
      _this.findZj();
    },
    getList() {
      //article/list
      var _this = this;
      let params = {
        url: "/article/list",
        type: Util.method.post,
        data: {
          page: _this.PageIndex,
          size: 10,
          filter: [{ pid: 0 }]
        },
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          console.log(res);
          _this.ZZList = [];
          _this.ZZList = res.data;
          _this.rows = res.rows;
        } else {
        }
      }
    },
    //添加专辑
    addBtn() {
      var _this = this;
      _this.selectId = -1;
      _this.selectTitle = "";
      _this.selectSubtitle = "";
      _this.selectContent = "";
      _this.selectImg = "";
      _this.showAddImg = false;
      _this.showAddContent = true;
      _this.editorOption.container.firstChild.innerHTML = _this.selectContent;
    },
    //修改专辑
    updataBtn() {
      var _this = this;
      _this.findZj();
      _this.showAddContent = true;
    },
    //删除专辑
    delBtn() {
      var _this = this;
      _this.modal2 = true;
    },
    //取消按钮
    cancelBtn() {
      var _this = this;
      _this.showAddContent = false;
    },
    ok() {
      var _this = this;
      var myids = _this.selectIds;
      //console.log(myids);
      //myids.push(_this.selectId);
      let params = {
        url: "/article/del",
        type: Util.method.post,
        data: {
          ids: myids
        },
        success: _successFun
      };
      Util.ajax(_this, params);

      function _successFun(res) {
        if (res.result == 0) {
          Utils.showToast.success(_this, "删除成功!");
          _this.twobtn = true;
          _this.threebtn = true;
          _this.modal2 = false;
          _this.PageIndex = 1;
          _this.getList();
        } else {
        }
      }
    },
    cancel() {
      console.log("取消");
      var _this = this;
      _this.modal1 = false;
      _this.modal2 = false;
      _this.cancelBtn();
    }
  }
};
</script>

<style>
#editor-div {
  overflow-y: auto;
}

#editor-div.ql-container,
#editor-div .ql-editor {
  height: auto;
}

.Button-footer {
  width: 100%;
  height: 40px;
  text-align: right;
  line-height: 38px;
  padding-top: 10px;
}

.Button-footer .Button {
  margin-right: 10px;
}
.demo-upload-list {
  display: inline-block;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>